<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>filter</title>
    <style type="text/css">
      /* ************************************************************** */
      .demo-box {
        display: flex;
        flex-direction: column;
        height: fit-content !important;
      }
      .demo-box > dl {
        width: 100% !important;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .sum-up-table {
        list-style: none;
      }
      .sum-up-table > li {
        columns: 2;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
      }
      .sum-up-table > li > * {
        margin: 0;
      }
      .demo {
        width: 150px;
        height: 150px;
        border: 1px red dashed;
      }
      .demo img {
        width: inherit;
        height: inherit;
      }

      .case1-1 {
        overflow: hidden;
      }
      .case1-1 img {
        filter: blur(5px);
      }
      .case1-2 {
        overflow: hidden;
      }
      .case1-2 img {
        scale: 1.05;
        filter: blur(5px);
      }
      .case1-3 {
        position: relative;
        overflow: hidden;
      }
      .case1-3 > img:first-child {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        filter: blur(10px);
        -webkit-mask-image: radial-gradient(
          transparent,
          transparent 10%,
          black 60%
        );
        mask-image: radial-gradient(transparent, transparent 10%, black 60%);
        transform: scale(1.2);
      }
      .case2-1 {
        filter: brightness(2);
      }
      .case2-2 {
        background-color: darksalmon;
        color: white;
        height: 40px;
        width: 180px;
        text-align: center;
      }
      .case2-2:active i {
        filter: brightness(100);
      }
      .case2-2 i {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
        vertical-align: -4px;
        margin-right: 5px;
        background-image: url(../../Source/svg/delete.svg);
      }
      .case3-1 {
        filter: contrast(2);
      }
      .case4-1 {
        filter: drop-shadow(4px 4px 8px black);
      }
      .case4-after {
        vertical-align: top;
      }
      .case4-after::after {
        content: '我是伪元素';
        display: block;
        height: 100px;
        width: 100px;
        border: 10px dashed gray;
      }
      .case5-1 {
        filter: grayscale(1);
      }
      .case6-1 {
        filter: hue-rotate(180deg);
      }
      .case6-2 {
        height: 36px;
        width: 80px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background-color: rgb(236, 59, 59);
        transition: all 0.3s;
        color: white;
      }
      .case6-2:active {
        background-color: rgb(41, 238, 238);
        color: black;
      }
      .case6-2:nth-of-type(2) {
        filter: hue-rotate(45deg);
      }
      .case6-2:nth-of-type(3) {
        filter: hue-rotate(90deg);
      }
      .case6-2:nth-of-type(4) {
        filter: hue-rotate(135deg);
      }
      .case6-2:nth-of-type(5) {
        filter: hue-rotate(180deg);
      }
      .case7-1 {
        filter: invert(1);
      }
      .case8-1 {
        filter: saturate(5);
      }
      .case9-1 {
        filter: sepia(0.7);
      }
      .case10-1 {
        background: url(../../Source/pic-transparent.png) 50% 50% / 100% 100%
          no-repeat;
        position: relative;
      }
      .case10-1 > div {
        position: absolute;
        inset: 0;
        margin: auto;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        color: #fff;
        line-height: 150px;
        text-align: center;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./22-图片等多媒体处理.html">上一篇</a>
      <a href="./24-css混合模式-暂无.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>filter</dt>
        <dd>
          <p>filter共支持10种滤镜</p>
          <ul class="sum-up-table">
            <li>
              <p>filter: blur(10px)</p>
              <p>高斯模糊</p>
            </li>
            <li>
              <p>filter: brightness(2.4)</p>
              <p>亮度</p>
            </li>
            <li>
              <p>filter: contrast(200%)</p>
              <p>对比度</p>
            </li>
            <li>
              <p>filter: drop-shadow(4px 4px 8px blue)</p>
              <p>投影</p>
            </li>
            <li>
              <p>filter: grayscale(50%)</p>
              <p>灰度</p>
            </li>
            <li>
              <p>filter: hue-rotate(90deg)</p>
              <p>色调旋转</p>
            </li>
            <li>
              <p>filter: invert(75%)</p>
              <p>反相</p>
            </li>
            <li>
              <p>filter: opacity(20%)</p>
              <p>透明度</p>
            </li>
            <li>
              <p>filter: saturate(200%)</p>
              <p>饱和度</p>
            </li>
            <li>
              <p>filter: sepia(60%)</p>
              <p>褐色</p>
            </li>
            <li>
              <p>filter: url(... .svg)</p>
              <p>SVG滤镜</p>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>高斯模糊blur</dt>
        <dd>
          <p>
            支持任意长度值，但不支持百分比；可以理解为屏幕上相互融合的像素数量
          </p>
          <div class="demo case1-1">
            <img src="../../Source/pic.jpg" />
          </div>
        </dd>
        <dd>
          <h4>问题：边缘泛白或泛黑</h4>
          <p>
            有两种思路：
            <br />
            1、在该图片后放一张原图
            <br />
            2、适当放大该图，这种方法更常用
          </p>
          <div class="demo case1-2">
            <img src="../../Source/pic.jpg" />
          </div>
          <pre><code>scale: 1.05;
filter: blur(5px);</code></pre>
        </dd>
        <dd>
          <h4>利用遮罩实现局部模糊</h4>
          <div class="demo case1-3">
            <img src="../../Source/pic.jpg" />
            <img src="../../Source/pic.jpg" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>亮度brightness</dt>
        <dd>
          <p>0-1（可以超过1）或者百分比</p>
          <div class="demo case2-1">
            <img src="../../Source/pic.jpg" />
          </div>
        </dd>
        <dd>
          <h4>黑白着色</h4>
          <button class="case2-2">
            <i></i>
            我是一个按钮
          </button>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>对比度contrast</dt>
        <dd>
          <p>可以为空，等同于contrast(1)</p>
          <div class="demo case3-1">
            <img src="../../Source/pic.jpg" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>阴影投射drop-shadow</dt>
        <dd>
          <p>
            drop-shadow(4px, 4px, 8px, color)
            <br />
            真实世界的阴影，所以没有扩展半径。
          </p>
          <div class="demo case4-1" style="display: inline-block;">
            <img src="../../Source/pic.jpg" />
          </div>
          <div class="demo case4-1" style="display: inline-block;">
            <img src="../../Source/pic-transparent.png" />
          </div>
          <div
            class="demo case4-1"
            style="display: inline-block; border: 10px dashed red;"
          ></div>
          <div
            class="demo case4-1 case4-after"
            style="display: inline-block; border: 10px dashed red;"
          >
            也可以影响到伪元素
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>灰度grayscale</dt>
        <p>0-1或0%-100%</p>
        <dd>
          <div class="demo case5-1">
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>色调旋转hue-rotate</dt>
        <dd>
          <p>角度值</p>
          <div class="demo case6-1">
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
        <dd>
          <h4>维护一套主题按钮</h4>
          <button class="case6-2">主按钮</button>
          <button class="case6-2">主按钮</button>
          <button class="case6-2">主按钮</button>
          <button class="case6-2">主按钮</button>
          <button class="case6-2">主按钮</button>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>反相invert</dt>
        <dd>
          <p>0-1或0%-100%；常用于深色模式，与hue-rotate配合</p>
          <div class="demo case7-1">
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>透明度opacity</dt>
        <p>和opacity类似，只不过opacity有硬件加速，所以没必要使用该属性</p>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>饱和度saturate</dt>
        <dd>
          <p>0-1或0%-100%；用于实现老照片效果</p>
          <div class="demo case8-1">
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>褐色滤镜speia</dt>
        <dd>
          <p>0-1或0%-100%；用于实现老照片效果</p>
          <div class="demo case9-1">
            <img src="../../Source/pic-transparent.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>更进一步的滤镜技术</dt>
        <dd>
          <p>10个滤镜是可以任意累加的</p>
          <p>此外，filter还支持svg滤镜</p>
          <a href="https://demo.cssworld.cn/new/11/1-5.php##" target="_blank">
            点这里看案例
          </a>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>姐妹花属性backdrop-filter</dt>
        <dd>
          <p>
            可设置属性与filter大同小异，不予赘述；与filter不同的是，该属性是设置在背景上，不影响内容
          </p>
        </dd>
        <dd>
          <h4>毛玻璃效果</h4>
          <div class="demo case10-1">
            <div>这里是内容</div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
